<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column">
      <div class="main">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleSwitchTab"
          type="border-card"
          tab-position="left"
        >
          <!-- 工单设置 -->
          <el-tab-pane label="工单设置" name="set">
            <SetCard ref="setCard" :active_name="String(activeName)" />
          </el-tab-pane>

          <!-- 工单策略 -->
          <el-tab-pane label="工单策略" name="strategy">
            <StrategyCard ref="strategyCard" />
          </el-tab-pane>

          <!-- 工单模块 -->
          <el-tab-pane label="工单模块" name="module">
            <ModuleCard ref="moduleCard" />
          </el-tab-pane>

          <!-- 工单SLA -->
          <el-tab-pane label="工单SLA" name="OrderSLA">
            <OrderSla ref="OrderSLA" />
          </el-tab-pane>

          <!-- 费用设置 -->
          <el-tab-pane label="费用设置" name="cost">
            <CostCard ref="costCard" />
          </el-tab-pane>

          <!-- 工单分配规则 -->
          <el-tab-pane label="工单分配规则" name="autoDeal">
            <DealCard ref="dealCard" />
          </el-tab-pane>

          <!-- 自定义字段 -->
          <el-tab-pane label="自定义字段" name="customField">
            <CustomField ref="cusField" />
          </el-tab-pane>

          <!-- 自定义模版 -->
          <el-tab-pane label="自定义模版" name="customModule">
            <CustomModule ref="customModule" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SetCard from './components/SetCard/index.vue'
  import StrategyCard from './components/StrategyCard/index.vue'
  import ModuleCard from './components/ModuleCard/index.vue'
  import CostCard from './components/CostCard/index.vue'
  import DealCard from './components/DealCard/index.vue'
  import CustomField from './components/CustomField/index.vue'
  import CustomModule from './components/CustomModule/index.vue'
  import OrderSla from '../../../../sla/list/index.vue'
  import { ref, watch, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { TabsPaneContext } from 'element-plus'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.orderSet,
  })

  // 当前所在页面的路由
  const route = useRoute()

  // 全局路由
  const router = useRouter()

  // 选中的标签
  const activeName = ref(route.query.active ? route.query.active : 'set')

  // 工单设置组件实例
  const setCard = ref<InstanceType<typeof SetCard> | null>(null)

  // 工单策略组件实例
  const strategyCard = ref<InstanceType<typeof StrategyCard> | null>(null)

  // 工单模块组件实例
  const moduleCard = ref<InstanceType<typeof ModuleCard> | null>(null)

  // 费用设置组件实例
  const costCard = ref<InstanceType<typeof CostCard> | null>(null)

  // 工单分配规则组件实例
  const dealCard = ref<InstanceType<typeof DealCard> | null>(null)

  // 自定义字段组件实例
  const cusField = ref<InstanceType<typeof CustomField> | null>(null)

  // 自定义模版组件实例
  const customModule = ref<InstanceType<typeof CustomModule> | null>(null)

  // 工单SLA组件实例
  const OrderSLA = ref<InstanceType<typeof OrderSla> | null>(null)

  // 导航切换
  const handleSwitchTab = (pane: TabsPaneContext) => {
    router.push({ path: '/busic/base/orderset', query: { active: pane.props.name } })
    activeName.value = pane.props.name as string
    getData()
  }

  // 获取数据
  const getData = () => {
    switch (activeName.value) {
      case 'set':
        if (setCard.value) {
          setCard.value.getSet()
        }
        break
      case 'strategy':
        if (strategyCard.value) {
          strategyCard.value.getTeamList()
        }
        break
      case 'module':
        if (moduleCard.value) {
          moduleCard.value.getList()
        }
        break
      case 'OrderSLA':
        if (OrderSLA.value) {
          OrderSLA.value.getnetworkListRows()
        }
        break
      case 'cost':
        if (costCard.value) {
          costCard.value.getList()
        }
        break
      case 'autoDeal':
        if (dealCard.value) {
          dealCard.value.getCustomerList()
        }
        break
      case 'customField':
        if (cusField.value) {
          cusField.value.getList()
        }
        break
      case 'customModule':
        if (customModule.value) {
          customModule.value.getTempList()
        }
        break
    }
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'orderSet') {
        getData()
      }
    },
  )

  onMounted(() => {
    getData()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
